<html>
<head>
<title> New DAB Templates</title>

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="static/jquery.simplecolorpicker.js"></script>

<link rel="stylesheet" href="static/jquery.simplecolorpicker.css">
<style> 

body{
	font-family:Helvetica, sans-serif;
	background:#f8f8f8;
	padding:0;
	margin:0;
}

a{
	text-decoration:none;
}

.toolbar{
	background:#efefef;
	padding:10px;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:10;
}

.toolbar span{
	display:inline-block;
	color:#888;
	font-size:12px;
}
.toolbar a{
	background:#6fc181;
	color:#fff;
	display:inline-block;
	padding:5px 10px;
	margin:0 5px 0;
	border-radius:2px;
	font-size:12px;
	box-shadow:0px 2px 3px rgba(0,0,0,0.4);
}
.toolbar span.divider{
	display:inline-block;
	margin:0 5px;
	background:#ccc;
	width:1px;
	height:16px;
	top:5px;
	position: relative;;
}
.toolbar a.off{
	background:#ccc;
}

.image-off .image{
	display:none;
}
.description-off .description{
	display:none;
}
.title-off .title{
	display:none;
}
.logo-off .logo{
	display:none;
}

.image-off .bg2{
	opacity:1;
}

.logo:before{
	content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.logo img {
  display: inline-block;
  vertical-align: middle;
}

.hideboundingbox-off .logo,
.hideboundingbox-off .text,
.hideboundingbox-off .title,
.hideboundingbox-off .description{
	border:1px solid rgba(255,255,255,0.6);
}
.ads-board{
	position: absolute;
	min-height:600px;
	margin:100px;
	top:44px;
	left:0;
	background:#f8f8f8;
	z-index:1;
	width:100%;
	transition:all 0.4s ease-in-out;
}

	.ad300x250{
		position: absolute;
		top:0;
		left:0;
		width:300px;
		height:250px;
	}
	.ad336x280{
		position: absolute;
		top:0;
		left:365px;
		width:336px;
		height:280px;
	}
	.ad160x600{
		position: absolute;
		top:0;
		left:765px;
		width:160px;
		height:600px;
	}
	.ad120x600{
		position: absolute;
		top:0;
		left:985px;
		width:120px;
		height:600px;
	}
	.ad120x600{
		position: absolute;
		top:0;
		left:985px;
		width:120px;
		height:600px;
	}
	.ad468x60{
		position: absolute;
		top:400px;
		left:0;
		width:468px;
		height:60px;
	}
	.ad728x90{
		position: absolute;
		top:510px;
		left:0;
		width:728px;
		height:90px;
	}
	.ad320x50{
		position: absolute;
		top:300px;
		left:0;
		width:320px;
		height:50px;
	}

.frosted{
	font-family: 'Open Sans', sans-serif;
}

.title{
	color:#fff;
	font-size:21px;
	font-weight:200;
}

.description{
	color:#fff;
	font-size:13px;
	font-weight:400;
	line-height:16px;
	opacity:0.6;
}

span.size{
	position: relative;
	top:-25px;
	font-size:10px;
}

.bg2{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	z-index:2;
	opacity:0.5;
}
.bg1{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#888888;
	z-index:0;
	
}

.image{
	z-index:1;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}

.ad300x250 .logo{
	position:absolute;
	top:20px;
	left:20px;
	width:260px;
	z-index:3;
	height:40px;
}

.ad300x250 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad300x250 .image img{
	margin-top:-10px;
	width:130%;
}

.ad300x250 .text{
	position:absolute;
	top:80px;
	left:20px;
	width:180px;
	z-index:3;
}

.ad300x250 .title{
	
	margin-bottom:15px;
}

.ad300x250 .description{
	
}

.button{
	background:#f75e5e;
	border-radius:4px;
	height:30px;
	line-height:30px;
	text-align:center;
	display:inline-block;
	padding:0px;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	position:absolute;
	z-index:3;
	overflow:hidden;
	text-overflow:ellipsis;
}

.ad300x250 .button{
	bottom:20px;
	right:20px;
	min-width:100px;
	max-width:150px;
}




.ad336x280 .logo{
	position:absolute;
	top:20px;
	left:20px;
	width:291px;
	z-index:3;
	height:40px;
}

.ad336x280 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad336x280 .image img{
	margin-top:-10px;
	width:130%;
}

.ad336x280 .text{
	position:absolute;
	top:80px;
	left:20px;
	width:180px;
	z-index:3;
}

.ad336x280 .title{
	font-size:24px;
	font-weight:200;
	
	margin-bottom:15px;
}

.ad336x280 .description{
	font-size:14px;
	color:#fff;
	font-weight:400;
	line-height:17px;
}

.ad336x280 .button{
	bottom:20px;
	font-size:12px;
	right:20px;
	min-width:100px;
	max-width:150px;
}




.ad160x600 .logo{
	position:absolute;
	top:20px;
	left:15px;
	width:130px;
	z-index:3;
	height:40px;
}

.ad160x600 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad160x600 .image img{
	margin-left:-500px;
	height:100%;
}

.ad160x600 .text{
	position:absolute;
	top:80px;
	left:15px;
	width:130px;
	z-index:3;
}

.ad160x600 .title{
	font-size:23px;
	font-weight:200;
	margin-bottom:15px;
}

.ad160x600 .description{
	font-size:13px;
	color:#fff;
	font-weight:400;
	line-height:17px;
}

.ad160x600 .button{
	bottom:40px;
	font-size:14px;
	left:15px;
	width:130px;
}




.ad120x600 .logo{
	position:absolute;
	top:20px;
	left:10px;
	width:100px;
	z-index:3;
	height:40px;
}

.ad120x600 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad120x600 .image img{
	margin-left:-500px;
	height:100%;
}

.ad120x600 .text{
	position:absolute;
	top:80px;
	left:10px;
	width:100px;
	z-index:3;
}

.ad120x600 .title{
	font-size:23px;
	font-weight:200;
	margin-bottom:15px;
}

.ad120x600 .description{
	font-size:13px;
	color:#fff;
	font-weight:400;
	line-height:17px;
}

.ad120x600 .button{
	bottom:40px;
	font-size:12px;
	left:10px;
	width:100px;
}




.ad468x60 .logo{
	position:absolute;
	top:10px;
	left:10px;
	width:70px;
	z-index:3;
	height:40px;
}

.ad468x60 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad468x60 .image img{
	margin-top:-100px;
	width:100%;
}

.ad468x60 .text{
	position:absolute;
	top:8px;
	left:95px;
	width:240px;
	z-index:3;
}

.ad468x60 .title{
	font-size:16px;
	font-weight:200;
	margin-bottom:3px;
}

.ad468x60 .description{
	font-size:12px;
	color:#fff;
	font-weight:400;
	line-height:13px;
}

.ad468x60 .button{
	top:50%;
	margin-top:-15px;
	font-size:12px;
	right:15px;
	width:100px;
}



.ad728x90 .logo{
	position:absolute;
	top:10px;
	left:10px;
	width:100px;
	z-index:3;
	height:40px;
}

.ad728x90 .logo img{
	max-width:100%;
	max-height:100%;
}

.ad728x90 .image img{
	margin-top:-100px;
	width:100%;
}

.ad728x90 .text{
	position:absolute;
	top:10px;
	left:130px;
	width:340px;
	z-index:3;
}

.ad728x90 .title{
	font-size:24px;
	font-weight:200;
	margin-bottom:3px;
}

.ad728x90 .description{
	font-size:14px;
	color:#fff;
	font-weight:400;
	line-height:18px;
}

.ad728x90 .button{
	top:50%;
	margin-top:-15px;
	font-size:12px;
	right:15px;
	width:100px;
}



.ad320x50 .logo{
	position:absolute;
	top:5px;
	left:10px;
	width:60px;
	z-index:3;
	height:40px;
}

.ad320x50 .logo img{
	max-width:100%;
	vertical-align:middle;
	max-height:100%;
}

.ad320x50 .image img{
	margin-top:-100px;
	width:100%;
}

.ad320x50 .text{
	position:absolute;
	top:5px;
	left:80px;
	width:185px;
	z-index:3;
	height:40px;
}


.ad320x50 .title{
	font-size:14px;
	font-weight:200;
	height:100%;
	 display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

.ad320x50 .description{
	font-size:12px;
	color:#fff;
	font-weight:400;
	line-height:12px;
	display: flex;
	justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
  height:0;
  opacity:0;
}

.ad320x50 .button{
	top:5px;
	font-size:9px;
	right:5px;
	bottom:5px;
	height:40px;
	width:40px;
	text-indent:-9999em;
}

.ad320x50 .button:after{
	content:'';
	display:block;
	background:url(images/borders/arrow.svg) 50% 50% no-repeat;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:50% auto;
}

.specs{
	position:absolute;
	top:44px;
	left:0;
	-webkit-transition:opacity 0.4s ease-in-out;
	transition:opacity 0.4s ease-in-out;
	opacity:0;
}

.specs .wrapper{
	width:600px;
	margin:20px 100px 100px;
	position:relative;
	font-family: 'PT Serif', sans-serif;
}
.specs section:after{
	display:block;
	content:'';
	width:2px;
	top:70px;
	left:0;
	bottom:40px;
	background:#ddd;
	position:absolute;
}
.specs p{
	color:#7E7F7B;
	font-size:16px;
	position:relative;
	padding-left:30px;
	line-height:22px;
}
.specs p:after{
	width:16px;
	height:16px;
	-webkit-border-radius:8px;
	background:#ddd;
	position:absolute;
	content:'';
	display:block;
	top:0;
	left:-7px;
}
.specs h3{
	font-size:29px;
	color:#52544E;
	font-weight:normal;
	padding-left:30px;
}
.specs img{
	margin-left:30px;
}

.ads .specs{
	height:600px;
	overflow:hidden;
	opacity:0;
}

.showspecs .ads-board{
	opacity:0;
}

.showspecs .specs{
	
	opacity:1;
	overflow:auto;
}

@-webkit-keyframes fade {
    0% {opacity: 0; height:0%;}
    5% {opacity: 1; height:100%;}
    50% {opacity: 1; height:100%;}
    55% {opacity: 0; height:0;}
    100% {opacity: 0; height:0;}
}

.ad320x50 .fade{
	 -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}
.ad320x50 .description {
    -webkit-animation-delay: -3s;
}

.image img,
.title,
.description,
.logo,
.button{
	-webkit-transition:all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}


.title{transition-delay:0.2s;}
.description{transition-delay:0.4s;}
.button{transition-delay:0.6s;}


.animate .title,
.animate .logo,
.animate .description{
	transform:translateY(-20px);
	opacity:0;
}
.animate .image img{
	transform:scale(1.2);
}
.animate .button{
	transform:scale(0);
}

body.animate:after{
	content:'';
	display:block;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff url(images/common/flapper.gif) 50% 50% no-repeat;
	text-align:center;
	vertical-align:middle;
	z-index:1000;
}
</style>
</head>
<body class="ads animate">
<div class="toolbar">
	<span>Toggle elements:</span>
	<a id="logo" href="javascript:;">Logo</a>
	<a id="title" href="javascript:;">Title</a>
	<a id="description" href="javascript:;">Description</a>
	<a id="image" href="javascript:;">Image</a>

	<span class="divider"></span>
	<span>bg1:</span>
	<select name="colorpicker-bg2">
	  <option value="#000000">Green</option>
	  <option value="#5484ed">Bold blue</option>
	  <option value="#a4bdfc">Blue</option>
	  <option value="#46d6db">Turquoise</option>
	  <option value="#7ae7bf">Light green</option>
	  <option value="#51b749">Bold green</option>
	  <option value="#fbd75b">Yellow</option>
	  <option value="#ffb878">Orange</option>
	  <option value="#ff887c">Red</option>
	  <option value="#dc2127">Bold red</option>
	  <option value="#dbadff">Purple</option>
	  <option value="#e1e1e1">Gray</option>
	</select>
   <!--
	<span style="margin-left:15px">bg2:</span>
	<select name="colorpicker-bg1">
	  <option value="#7bd148">Green</option>
	  <option value="#5484ed">Bold blue</option>
	  <option value="#a4bdfc">Blue</option>
	  <option value="#46d6db">Turquoise</option>
	  <option value="#7ae7bf">Light green</option>
	  <option value="#51b749">Bold green</option>
	  <option value="#fbd75b">Yellow</option>
	  <option value="#ffb878">Orange</option>
	  <option value="#ff887c">Red</option>
	  <option value="#dc2127">Bold red</option>
	  <option value="#dbadff">Purple</option>
	  <option value="#e1e1e1">Gray</option>
	</select>
-->

	<span class="divider"></span>
	<span>Eng tools:</span>
	<a id="hideboundingbox" class="off" href="javascript:;">Toggle bounding box</a>
	<a id="showspecs" class="off" href="javascript:;">Show specs</a>
	<a id="animate" class="off" href="javascript:;">Repeat animation</a>
</div>

<div class="specs">
	<div class="wrapper">
		<section>
			<h3> Image positioning </h3>
			<p> When using an image, the image should always 'fill' the entirety of the ad box. </p>
			<p> In the absence of a 'smart' way of positioning the image, the default position should be top:50% left:50% (i.e. vertically and horizontally centered) </p>
			<img src="images/frosty/specs/image.png">
		</section>

		<section>
			<h3> Logo size &amp; positioning </h3>
			<p> The logo size should be set by making the logo image 'fit' within the logo area bounding box. </p>
			<p> The default logo position should be top:50% left:0 (i.e. vertically centered and horizontally left-aligned). </p>
			<p> Ideally, the user should be able to move the logo to wherever they wish by dragging it. </p>
		</section>

		<section>
			<h3> Button color</h3>
			<p> The default button background color should be #f75e5e, and the default button text should be white. Choosing the default button color based on the colors im the image or logo is not recommended, since it can lead to poor contrast or subdued colors. We want to encourage a bright button color that pops out. </p>
			<img src="images/frosty/specs/button.png">
		</section>

		

		<section>
			<h3> Vertical alignment of text</h3>
			<p> For the 320x50 ad size, where we alternate the title and decription text, the text should always be vertically centered within the ad. </p>
			<img src="images/frosty/specs/text-alignment.png">
		</section>

		<section>
			<h3> Title &amp; description color</h3>
			<p> It is more aesthetically pleasing when the title and subtitle are not the same shade. Here, the description color is differentiated from the title by using opacity. The description has 60% opacity, compared to the title's 100% opacity. </p>
		</section>

		<section>
			<h3> Default font</h3>
			<p> The default font used here is Helvetica or Arial. </p>
		</section>
	</div>
</div>
<div class="ads-board">
					
					<div class="ad300x250">
						<span class="size">300x250</span>
						<div class="logo">
							<img src="images/common/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<div class="ad336x280">
						<span class="size">336x280</span>
						<div class="logo">
							<img src="images/common/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<div class="ad120x600">
						<span class="size">120x600</span>
						<div class="logo">
							<img src="images/common/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<div class="ad160x600">
						<span class="size">160x600</span>
						<div class="logo">
							<img src="images/common/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<div class="ad468x60">
							<span class="size">468x60</span>
							<div class="logo">
							<img src="images/common/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<div class="ad728x90">
						<span class="size">728x90</span>
						<div class="logo">
							<img src="images/common/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
					<div class="ad320x50 highlight ft-fragment">
						<span class="size">320x50</span>
						<div class="logo">
							<img src="images/common/logo.png">
						</div>
						<div class="text">
							<div class="title">
								Grand Canyon Hiking Tours
							</div>
							<div class="description">
								Expert Philadelphia PA Tree Service Free Tree Service Quote Guaranteed!
							</div>
						</div>
						<div class="image">
							<img src="images/frosty/image.png">
						</div>
						<a class="button" href="#">Learn more</a>
						<div class="bg1"></div>
						<div class="bg2"></div>
					</div>
				</div>

<script>

$(window).load(function(){
	setTimeout(function(){$("body").removeClass("animate"); },300);
	setTimeout(function(){$(".ad320x50 .title").addClass("fade");$(".ad320x50 .description").addClass("fade");},1200);
});
$("document").ready(function(){

	$('select[name="colorpicker-bg1"]').simplecolorpicker({
	  picker: true
	}).on('change', function() {
	  $(".bg1").css('background-color', $('select[name="colorpicker-bg1"]').val());

	});

	$('select[name="colorpicker-bg2"]').simplecolorpicker({
	  picker: true
	}).on('change', function() {
		console.log("k");
	  $(".bg2").css('background-color', $('select[name="colorpicker-bg2"]').val());
	});


	


	$(".toolbar a").click(function(){
		$(this).toggleClass("off");
		var which = $(this).attr("id");
		if (which=="showspecs"){
			$("body").toggleClass("ads").toggleClass("showspecs");
		}
		else if (which=="animate"){
			$("body").addClass("animate").animate({opacity:1},1000,function(){$(this).removeClass("animate")});
		}
		else{
			$(".ads-board").toggleClass(which+"-off");
			$("body").removeClass("showspecs").addClass("ads");
		}
	})
})
</script>
</body>
</html>